<template>
  <div class="digBox">
    <div class="digBox__orderMsg">
      <div style="font-weight:bold">物流信息</div>
      <div class="digBox__orderMsg--line">
        <div style="margin-top:10px">收货地址：{{ detail.address }}</div>
        <div style="margin-top:10px">
          物流公司：{{ detail.deliveryCompany }}
        </div>
        <div style="margin-top:10px">物流单号：{{ detail.deliverySn }}</div>
      </div>
    </div>
    <div class="digBox__orderMsg">
      <div class="digBox__orderMsg--orderType" v-if="!hasLogistics">
        暂无物流详情信息
      </div>
      <div v-else>
        <span style="font-weight:bold">物流详情</span>
        <el-steps direction="vertical" :active="acitve" style="margin-top:20px">
          <el-step v-for="(item, i) of logDetail" :key="i">
            <div slot="icon">{{ i + 1 }}</div>
            <div slot="title">{{ item.context }}</div>
            <div slot="description">{{ item.time }}</div>
          </el-step>
        </el-steps>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import { integralGoodLogMsg } from "@/api/integral/integral";

@Component
export default class Delivery extends Vue {
  @Prop({
    type: Object,
    default() {
      return {};
    },
  })
  detail: any;

  @Watch("detail")
  watchDetail() {
    this.getMsg();
  }

  get acitve() {
    return this.logDetail.length - 1;
  }

  reverse = true;

  logDetail: any = [];

  /** 是否有物流信息 */
  hasLogistics = false;

  mounted() {
    this.getMsg();
  }

  getMsg() {
    let shipperType = "sf";
    if (this.detail.deliveryCompany === "顺丰快递") {
      shipperType = "sf";
    }
    if (this.detail.deliveryCompany === "中通快递") {
      shipperType = "zt";
    }
    if (this.detail.deliveryCompany === "圆通快递") {
      shipperType = "yt";
    }
    if (this.detail.deliveryCompany === "韵达快递") {
      shipperType = "yd";
    }
    if (this.detail.deliveryCompany === "百世快递") {
      shipperType = "ht";
    }
    const param = {
      shipperType,
      waybillNo: this.detail.deliverySn,
    };
    integralGoodLogMsg(param).then(res => {
      const result = JSON.parse(res.data);
      if (result.code === 201101) {
        this.hasLogistics = false;
      } else {
        this.hasLogistics = true;
        this.logDetail = result;
      }
    });
  }
}
</script>

<style lang="scss" scoped>
@include b(digBox) {
  padding: 20px;

  @include e(orderMsg) {
    margin-top: 20px;
    color: #8893a7;
    @include m(orderType) {
      background-color: #e9f3fb;
      margin-top: 20px;
      padding: 10px;
      display: flex;
      align-items: center;
      font-weight: bold;
      color: #697992;
    }
    @include m(line) {
      margin-top: 10px;
      padding-bottom: 40px;
      border-bottom: 1px solid #e4e7ed;
    }
  }
}
</style>
